window.onload = function(){
    // fullpage
    $(function(){
        $('#fullPage').fullpage({
            anchors: ['anchor1', 'anchor2', 'anchor3', 'anchor4', 'footerl'],
            sectionsColor:['#000','none','#fff','#fff'],
            menu: '#menu',
            onLeave: function(index, nextIndex, direction){
                var leavingSection = $(this);
                var redCircle = document.querySelector('.red-circle');
                var downCircle = document.querySelectorAll('.num-two .pie1');
                if((index == 1||index == 3||index == 4)&&nextIndex == 2){
                    redCircle.classList.add('red-appear');
                    redCircle.style.display = 'block';
                    for(let i = 0;i<3;i++){
                        downCircle[i].classList.add('down-circle')
                    }
                }
                if(index == 2 && (nextIndex == 1||nextIndex == 3||nextIndex == 4)){
                    redCircle.classList.remove('red-appear');
                    redCircle.style.display = 'none';
                    for(let i = 0;i<3;i++){
                        downCircle[i].classList.remove('down-circle')
                    }
                }
            },
            afterLoad: function(anchorLink, index){
                var loadedSection = $(this);
                var tobigCircle = document.querySelector('.c5');
                let liPic = document.querySelectorAll('.num-three ul li');
                let downText = document.querySelector('.down-text');
                var tobigCircle = document.querySelector('.c5');
                var numFourCircle = document.querySelector('.up-circle');
                var circleToBig = document.querySelector('.up-circle .c1');
                var check1 = document.querySelectorAll('.fixed-left li span');
                if(index == 1){
                    for(let i = 0;i<liPic.length;i++){
                        liPic[i].classList.remove('down'+i);
                    }
                    tobigCircle.classList.remove('tobig-circle');
                    numFourCircle.style.display = 'block'; 
                    for(let i = 0;i<check1.length;i++){
                        check1[i].classList.remove('active')
                    }
                    check1[index-1].classList.add('active')
                }
                if(index == 2){
                    for(let i = 0;i<liPic.length;i++){
                        liPic[i].classList.remove('down'+i);
                    }
                    tobigCircle.classList.remove('tobig-circle');
                    numFourCircle.style.display = 'block'; 
                    for(let i = 0;i<check1.length;i++){
                        check1[i].classList.remove('active')
                    }
                    check1[index-1].classList.add('active')
                }
                if(index == 3){
                    for(let i = 0;i<liPic.length;i++){
                        liPic[i].classList.add('down'+i);
                    }
                    tobigCircle.classList.add('tobig-circle');
                    numFourCircle.style.display = 'block'; 
                    for(let i = 0;i<check1.length;i++){
                        check1[i].classList.remove('active')
                    }
                    check1[index-1].classList.add('active')
                }
                if(index == 4){
                    for(let i = 0;i<liPic.length;i++){
                        liPic[i].classList.remove('down'+i);
                    }
                    tobigCircle.classList.remove('tobig-circle');
                    circleToBig.classList.add('circleToBig');
                    setTimeout(function(){
                        numFourCircle.style.display = 'none'; 
                        circleToBig.classList.remove('circleToBig');
                    },2000)
                    for(let i = 0;i<check1.length;i++){
                        check1[i].classList.remove('active')
                    }
                    check1[index-1].classList.add('active')
                }
            },
        });
    }); 
    // 向下翻页
    var bot = $('.bot');
    bot.on('click', function(e){
        $.fn.fullpage.moveSectionDown()
    })

    // 右部固定跳转栏
    var fixedRight = document.querySelectorAll('.fixed li');
    for(var i = 0;i<fixedRight.length;i++){
        fixedRight[i].onmouseenter = function(){
            this.querySelector('a').classList.add('active')
        }
        fixedRight[i].onmouseleave = function(){
            this.querySelector('a').classList.remove('active')
        }
    }

    // 导航栏字体颜色的变化 及下拉框的出现消失
    var navli = document.querySelectorAll('.bigul>li');
    for(var i = 0;i<navli.length;i++){
        if(i == 3){
            continue;
        }
        navli[i].onmouseenter = function(){
            var as = this.querySelector('a');
            as.style.fontWeight = "bold";
            var down = this.querySelector('.down-select');
            down.style.display = "block";
        }
        navli[i].onmouseleave = function(){
            var as = this.querySelector('a');
            as.style.fontWeight = "normal";
            var down = this.querySelector('.down-select');
            down.style.display = "none";
        }
    }

    // 搜索图标的点击效果
    var searchimg = document.querySelectorAll('.top-right img:nth-Child(1)');
    searchimg[0].onclick = function(){
        var search = document.querySelector('.search');
        search.style.display = 'block';
    }
    var closeButton = document.querySelectorAll('.search img'); 
    closeButton[0].onclick = function(){
        var search = document.querySelector('.search');
        search.style.display = 'none';
    }

    // 小地球图的点击效果
    var worldimg = document.querySelectorAll('.top-right img:nth-Child(2)');
    worldimg[0].onclick = function(){
        var world = document.querySelector('.world');
        if(world.style.display == 'none'){
            world.style.display = 'block';
        }else{
            world.style.display = 'none';
        }
    }

    // 下拉框的移入变化效果
    var downselectLi = document.querySelectorAll('.down-select li');
    for(var i = 0;i<downselectLi.length;i++){
        downselectLi[i].onmouseenter = function(){
            var as = this.querySelector('a:nth-Child(1)');
            as.classList.add('active')
        }
        downselectLi[i].onmouseleave = function(){
            var as = this.querySelector('a:nth-Child(1)');
            as.classList.remove('active')
        }
    }

    // 导航下拉栏小加号移入变化效果
    let smallpic = document.querySelectorAll('.add');
    let smalladd = document.querySelectorAll('.add-ul');
    console.log(smalladd,smallpic)
    for(let i = 0;i<smallpic.length;i++){
        smallpic[i].onmouseenter = function(){
            smalladd[i].style.display = 'block';
        }
        smalladd[i].onmouseleave = function(){
            smalladd[i].style.display = 'none';
        }
    }

    // 移入小加号出现的内容上的变化效果
    let smallallword = document.querySelectorAll('.add-ul p');
    console.dir(smallallword[0] )
    for(let i = 0;i<smallallword.length;i++){
        smallallword[i].onmouseenter = function(){
            let as = this.querySelector('a');
            console.log(as)
            as.classList.add('active')
        }
        smallallword[i].onmouseleave = function(){
            let as = this.querySelector('a');
            as.classList.remove('active')
        }
    }
    
    // 轮播图
    var paginater = document.querySelectorAll('.paginater li');
    var banner = document.querySelector('.active div');
    var bannerWitch = banner.children[0].offsetWidth;
    var now = 0,next = 0;
    var t = setInterval(right,6000);  
    function right(){
        next++;
        if(next == 2){
            next = 0;
        }
        banner.children[next].style.left = bannerWitch +'px';
        animate(banner.children[now],{left:-bannerWitch},0,function(){
            // 判断
            if(this.classList.contains('one')){
                var pic3 = document.querySelector('.one div:nth-child(1)');
                pic3.classList.remove('tobig');
                var pic4 = document.querySelector('.one div:nth-child(2)');
                pic4.classList.remove('appear1');
                var pic5 = document.querySelector('.one div:nth-child(3)');
                pic5.classList.remove('appear');
                var pie = document.querySelectorAll('.one .c1,.one .c2,.one .c3');
                for(var i = 0;i<pie.length;i++){
                    pie[i].classList.remove('circle'+i);
                }
                var pic1 = document.querySelector('.two div:nth-child(1)');
                pic1.classList.add('down1');
                var pic2 = document.querySelector('.two div:nth-child(2)');
                pic2.classList.add('appear');
                var pie = document.querySelectorAll('.two .c1,.two .c2,.two .c3');
                for(var i = 0;i<pie.length;i++){
                    pie[i].classList.add('circle'+i);
                }
            }else{
                var pic3 = document.querySelector('.one div:nth-child(1)');
                pic3.classList.add('tobig');
                var pic4 = document.querySelector('.one div:nth-child(2)');
                pic4.classList.add('appear1');
                var pic5 = document.querySelector('.one div:nth-child(3)');
                pic5.classList.add('appear');
                var pie = document.querySelectorAll('.one .c1,.one .c2,.one .c3');
                for(var i = 0;i<3;i++){
                    pie[i].classList.add('circle'+i);
                }
                var pic1 = document.querySelector('.two div:nth-child(1)');
                pic1.classList.remove('down1');
                var pic2 = document.querySelector('.two div:nth-child(2)');
                pic2.classList.remove('appear');
                var pie = document.querySelectorAll('.two .c1,.two .c2,.two .c3');
                for(var i = 0;i<pie.length;i++){
                    pie[i].classList.remove('circle'+i);
                }
            }
        });
        animate(banner.children[next],{left:0},0);

        // 底部按钮的效果
        paginater[now].classList.remove('active');
        paginater[next].classList.add('active');
        now = next; 
    } 

    // 鼠标移入轮播点，轮播停止，移出继续
    for(var i = 0;i<paginater.length;i++){
        paginater[i].onmouseenter = function(){
            clearInterval(t);
        }
        paginater[i].onmouseleave = function(){
            t = setInterval(right,6000); 
        }
    }
    
    // 轮播图点击效果
    for(var i = 0;i < paginater.length;i++){
        paginater[i].onclick = (function(index){
            return function(){
                if(this.classList.contains('active')){
                    return;
                }
                banner.children[index].style.left = bannerWitch +'px';
                animate(banner.children[now],{left:-bannerWitch},0,function(){
                    // 判断
                    if(this.classList.contains('one')){
                        var pic3 = document.querySelector('.one div:nth-child(1)');
                        pic3.classList.remove('tobig');
                        var pic4 = document.querySelector('.one div:nth-child(2)');
                        pic4.classList.remove('appear1');
                        var pic5 = document.querySelector('.one div:nth-child(3)');
                        pic5.classList.remove('appear');
                        var pie = document.querySelectorAll('.one .c1,.one .c2,.one .c3');
                        for(var i = 0;i<pie.length;i++){
                            pie[i].classList.remove('circle'+i);
                        }
                        var pic1 = document.querySelector('.two div:nth-child(1)');
                        pic1.classList.add('down1');
                        var pic2 = document.querySelector('.two div:nth-child(2)');
                        pic2.classList.add('appear');
                        var pie = document.querySelectorAll('.two .c1,.two .c2,.two .c3');
                        for(var i = 0;i<pie.length;i++){
                            pie[i].classList.add('circle'+i);
                        }
                    }else{
                        var pic3 = document.querySelector('.one div:nth-child(1)');
                        pic3.classList.add('tobig');
                        var pic4 = document.querySelector('.one div:nth-child(2)');
                        pic4.classList.add('appear1');
                        var pic5 = document.querySelector('.one div:nth-child(3)');
                        pic5.classList.add('appear');
                        var pie = document.querySelectorAll('.one .c1,.one .c2,.one .c3');
                        for(var i = 0;i<3;i++){
                            pie[i].classList.add('circle'+i);
                        }
                        var pic1 = document.querySelector('.two div:nth-child(1)');
                        pic1.classList.remove('down1');
                        var pic2 = document.querySelector('.two div:nth-child(2)');
                        pic2.classList.remove('appear');
                        var pie = document.querySelectorAll('.two .c1,.two .c2,.two .c3');
                        for(var i = 0;i<pie.length;i++){
                            pie[i].classList.remove('circle'+i);
                        }
                    }
                });
                animate(banner.children[index],{left:0},0);
                paginater[now].classList.remove('active');
                paginater[index].classList.add('active');
                now = index;  
            }
        })(i)
    }

    // 第三屏鼠标移入动画变大 变亮 改变字体颜色
    let liPic = document.querySelectorAll('.num-three ul li');
    let threePic = document.querySelectorAll('.num-three ul li img:nth-child(2n)');
    let gleyPic = document.querySelectorAll('.num-three ul li img:nth-child(1)');
    let spanColor = document.querySelectorAll('.textbox dd span:nth-child(1)');
    for(let i = 0;i<3;i++){
        liPic[i].onmouseenter = function(){
            threePic[i].classList.add('active');
            gleyPic[i].classList.add('active');
            spanColor[i].classList.add('active');
        }
        liPic[i].onmouseleave = function(){
            threePic[i].classList.remove('active');
            gleyPic[i].classList.remove('active');
            spanColor[i].classList.remove('active');
        }
    }
    //第四屏选项卡
    let lis = document.querySelectorAll('.gallery-thumbs .swiper-slide');
    let worldText = document.querySelectorAll('.world-text>div');
    for(let i = 0;i<lis.length;i++){
        lis[i].onclick = function(event){
            for(let j = 0;j<worldText.length;j++){
                lis[j].classList.remove('active');
                worldText[j].classList.remove('active');
            }
            lis[i].classList.add('active');
            worldText[i].classList.add('active');
        }
    }
}
